<template>
  <div id="capture"> 
    <h3>打印测试页面</h3>
    <p>
      welcome to：
      {{deviceInfo.imgSource}}
      {{deviceInfo.imgWidth}}
      {{deviceInfo.imgHeight}}
    </p>
    <div>{{deviceInfo.imgSource}}</div>
    <!-- <img :src="deviceInfo.imgSource" :style="{'width': deviceInfo.imgWidth , 'height':deviceInfo.imgHeight }" alt="print"> -->
  </div>
</template>

<script>

const ipcRenderer = require('electron').ipcRenderer
export default {
  name: 'prelude',
  data () {
    return {
      deviceInfo: {
        imgSource: '',
        imgWidth: '',
        imgHeight: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      ipcRenderer.on('main-send-msg', (event, deviceInfos) => {
        this.deviceInfo = deviceInfos
        console.log('接收到打印数据', this.deviceInfo)
      })
      ipcRenderer.on('main-view-print', () => {
        // 1.需要把当前页的截图一张 可以用html2canvas，2.传回主页面做预览效果
        // html2canvas(document.querySelector('#capture')).then(canvas => {
        //   // document.body.appendChild(canvas)
        //   let imgSourceBase64 = canvas
        //   ipcRenderer.send('print-view-ok', imgSourceBase64)
        // })
      })
    }
  }
}
</script>

<style media="print">
  /*  page样式是用来设置打印机打印出来的样式，例如设置小票外边距样式 */
  @page {
    margin: 0px;
  }
</style>

